<!DOCTYPE html>
<html>
<head>
	<link rel=StyleSheet href="css/bootstrap.css" type="text/css">
	<link rel=StyleSheet href="css/stylesheet.css" type="text/css">
	<link rel=StyleSheet href="css/stylesheet-cart.css" type="text/css">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
	
	<meta content="en-us" http-equiv="Content-Language" />
	<title>Gamers Pizza</title>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>
<body>

<div class="page-header">
	<h1>
		Administration de l'application
	</h1>
	<a href="../vue" class="btn">Accueil</a>
</div>
<div class="container-fluid">
	<div class="row-fluid">
		<div class="span2">
			<!--Sidebar content-->
			<div class="well well-small">
				<ul class="nav nav-list" id="content_tab">
					<li class="nav-header">Statistiques</li>
					<li class="active"><a href="#users" data-toggle="tab">Utilisiteurs</a></li>
					<li><a href="#products" data-toggle="tab">Produits</a></li>
				</ul>
			</div>
		</div>
		<div class="span10">
			<!--Body content-->
			
			<div class="tab-content">
  				<div class="tab-pane active" id="users">
  				
  					<!--Users info-->
					<div class="well">
						<h3>Classement des utilisateurs par nombre de FP</h3>
						<br>
						<!-- Complementary info on users -->
						<div class="alert alert-info fade in" style="display: none">
						<a class="close" href="#">&times;</a>
								<dl class="dl-horizontal">
		  							<dt>Inscription </dt>
		  							<dd>07/11/2002</dd>
		  							<dt>Dernière activité </dt>
		  							<dd>03/12/2012</dd>
		  							<dt>Adresse e-mail </dt>
		  							<dd>mark.otto@example.com</dd>
		  							<dt>Total de commandes </dt>
		  							<dd>243</dd>
								</dl>
						</div>
						
						<table class="table table-striped table-hover">
			              <thead>
			                <tr>
			                  <th>#</th>
			                  <th>FP</th>
			                  <th>First Name</th>
			                  <th>Last Name</th>
			                  <th>Username</th>
			                  <th></th>
			                </tr>
			              </thead>
			              
			              <tbody> 
			                <tr>
			                  <td>1</td>
			                  <td>1337</td>
			                  <td>Mark</td>
			                  <td>Otto</td>
			                  <td>@mdo</td>
			                  <td><button id="button1" type="button" class="btn btn-primary btn-small" data-toggle="button">
			                  	Détails
			                  </button></td>
			                </tr>
			                
			                <tr>
			                  <td>2</td>
			                  <td>999</td>
			                  <td>John</td>
			                  <td>smith</td>
			                  <td>smithou</td>
			                  <td><button type="button" class="btn btn-primary btn-small" data-toggle="button">
			                  	Détails
			                  </button></td>
			                </tr>
			                
			                <tr>
			                  <td>3</td>
			                  <td>666</td>
			                  <td>Serge</td>
			                  <td>Tremblay</td>
			                  <td>stremblay</td>
			                  <td><button type="button" class="btn btn-primary btn-small" data-toggle="button">
			                  	Détails
			                  </button></td>
			                </tr>
			                
			                <tr>
			                  <td>4</td>
			                  <td>12</td>
			                  <td>Michael</td>
			                  <td>moore</td>
			                  <td>mm</td>
			                  <td><button type="button" class="btn btn-primary btn-small" data-toggle="button">
			                  	Détails
			                  </button></td>
			                </tr>
			                
			                <tr>
			                  <td>5</td>
			                  <td>0</td>
			                  <td>Ivan</td>
			                  <td>ohé</td>
			                  <td>ivanohé</td>
			                  <td><button type="button" class="btn btn-primary btn-small" data-toggle="button">
			                  	Détails
			                  </button></td>
			                </tr>
			              </tbody>
			            </table>
			              
					</div>
			
  				</div>
				<div class="tab-pane" id="products">
				
					<!--Products info-->
					<div class="well">
						<h3>Classement des produits les plus achetés</h3>
						<br>
						<div id="chart_div" align="center"></div>
					</div>
				
				</div>
			</div>
			
		</div>
	</div>
</div>

</body>
<script src="js/bootstrap.js"></script>
<script>
$(document).ready( function() {

	$('.alert .close').live("click", function(e) {
	    $(this).parent().hide();
	});

	$('button#button1').click(function(e) {
		  var $this = $(this);
		  if (!$this.hasClass('active')) {
			  $('.alert').show();
		  } else {
			  $('.alert').hide();
		  }
		  e.preventDefault();
		});
			
});
</script>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Task', 42],
            ['BAAAAACOOOOOON',     11],
            ['Fromage',      2],
            ['Coca cola',  2],
            ['7up', 2],
            ['Pepsi',    7],
            ['Monster',    11],
            ['Frites',    7]
            ]);

        var options = {
        		tooltipText: 'percentage',
        		backgroundColor: '#f5f5f5',
        		width: 400, 
            	height: 400,
            	chartArea: {
                	width:380, 
                	height:380, 
                	left:10,top:10,bottom:0,right:0
                }
              };
        
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>

</html>
